<template>
	<div class="forget">
		<div class="model">
			<div class="title">忘记密码</div>
			<el-form :rules="rules" :model="ruleForm" ref="ruleForm">
				<el-form-item class="item" prop="phone" label="手机号">
					<el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item class="item" prop="code" label="验证码">
					<el-input v-model="ruleForm.code" class="code" placeholder="请输入验证码"></el-input>
					<el-button type="primary">获取验证码</el-button>
				</el-form-item>
				<el-form-item class="item" prop="password" label="新密码">
					<el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item class="item">
					<!-- <span class="forget" @click="forget">忘记密码</span> -->
				</el-form-item>
				<el-form-item class="item button">
					<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
				</el-form-item>
				<el-form-item class="item">
					<p class="tips">
						没有账号,<span>马上注册</span>
					</p>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script lang="ts">
	import { Component, Vue } from "vue-property-decorator";
	const validatephone = (rule:any,value:string,callback:any)=>{
		if(!value){
			console.log(rule)
			console.log(value)
			callback(new Error('手机号不能为空'))
		}else{
			if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))){
				callback(new Error('请输入正确手机号'))
			}
			callback();
		}
	}
	const validatepassword = (rule:any,value:string,callback:any)=>{
		if(!value){
			callback(new Error('密码不能为空'))
		}
		else{
			callback();
		}
	}
	const validatecode = (rule:any,value:string,callback:any)=>{
		if(!value){
			callback(new Error('验证码不能为空'))
		}
		else{
			callback();
		}
	}

	@Component({})

	export default class forget extends Vue{
		private ruleForm={
			phone:'',
			code:'',
			password:''
		}
		private rules = {
			phone:[{trigger: 'blur', validator: validatephone }],
			password:[{trigger: 'blur', validator: validatepassword }],
		}



		submitForm(){
			(this.$refs.ruleForm as ElForm).validate(val=>{
				if(!val){

				}
			})
		}
	}
</script>
<style lang="scss" scoped>
	.model{
		position: fixed;
	    top: 50%;
	    left: 50%;
	    background-color: #fff;
	    box-shadow: 0 0 10px #eee;
	    border-radius: 5px;
	    padding: 30px;
	    /* width:50%; */
	    /* height: 50%; */
		-webkit-transform: translateX(-50%) translateY(-50%);
		.title{
			text-align: center;
			line-height: 40px;
			margin-bottom: 20px;
			font-size: 18px;
		}
		.item{
			margin-bottom: 20px;
			width: 300px;
			/deep/ .el-form-item__content{
				width: 100%;
				display: flex;
				justify-content: space-between;

			}
			/deep/ .el-form-item__content::before{content:none;}
			/deep/ .el-form-item__content::after{content:none;}
			/deep/ .el-form-item__label{
				float: none;
			}
			.input{
				width: 100%;
				button{
					width: 100%;
				}

			}
			.el-input.code{
				width: 50%;
			}
			.forget{
				display: block;
				width: 100%;
				text-align: right;
				cursor: pointer;
				color: #007fff;
			}
			.tips{
				width: 100%;
				text-align: center;
				line-height: 40px;
				span{
					cursor: pointer;
					color: #007fff;
				}
			}
		}
		.item:last-child{
			margin: 0;

		}
		.button{
			button{
				width: 100%;
			}
		}
	}
</style>